<template>
        <div id="app">
        <div class="container">
        <div class="item1">语文</div>
        <div class="item2">数学</div>
        <div class="item3">英语</div> 
        <div class="item3">科学</div> 
        </div> 
         <div class="h"></div>
        </div>
</template>
<script>
export default {
    data() {
        return {};  
        
    },
    methods:{},
};
</script>

<style scoped>
.h{
    height:2000px;

    }

.container{
 display: flex;
 background: #001528;
 height: 60px;
 flex-direction: row;
 justify-content: center;
 margin-bottom: 10px;
   position:fixed;
}
.item1,
.item2,
.item3,
.item4 {
    width: 100px;
    height: 60px;
    line-height: 60px;
    color:#fff;
    text-align: center;
    cursor: pointer;

}
.item2{
  background: #1890ff;
  
}
.item1:hover
.item2:hover
.item3:hover
.item4:hover{
  background:#334453;
  
}



</style>